<template>
  <div class="app-container">
    <el-row>
      <el-card style="padding-top:20px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size :label-position="labelPosition" label-width="110px">
          <el-row :gutter="20">
            <!--medium / small / mini  -->

            <el-col :span="8">
              <el-form-item label="任务编号:">
                <el-input v-model="formInline.user" placeholder="审批人" style="width:250px" />
              </el-form-item>
            <!--  -->
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务分配状态:">
                <el-select v-model="formInline.region" placeholder="活动区域" style="width:250px">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            <!--  -->
            </el-col>
            <el-col :span="8">
              <el-form-item label="满载状态:">
                <el-select v-model="formInline.region" placeholder="活动区域" style="width:250px">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            <!--  -->
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <!--medium / small / mini  -->

            <el-col :span="8">
              <el-form-item label="车牌号码:">
                <el-input v-model="formInline.user" placeholder="审批人" style="width:250px" />
              </el-form-item>
            <!--  -->
            </el-col>
            <el-col :span="8">
              <el-form-item label="起始地机构:">
                <el-select v-model="formInline.region" placeholder="活动区域" style="width:250px">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            <!--  -->
            </el-col>
            <el-col :span="8">
              <el-form-item label="目的地机构:">
                <el-select v-model="formInline.region" placeholder="活动区域" style="width:250px">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            <!--  -->
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <!--  -->

            <el-col>
              <!--  -->
              <el-form-item>
                <el-button type="primary" style="width:80px" class="search" @click="onSubmit">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button style="width:80px" @click="onSubmit">重置</el-button>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form></el-card>
    </el-row>
    <el-row class="tab-change" style="margin:20px 0px">
      <!--  -->

      <!--  -->
      <el-button>全部<span>
        <!--  -->
      </span></el-button>
      <el-button>待提货<span>1</span></el-button>
      <el-button>进行中<span>1</span></el-button>
      <el-button>已完成<span>1</span></el-button>
      <el-button>已取消<span>1</span></el-button>

    </el-row>
    <el-row>
      <!-- 常用功能 -->
      <el-col>
        <el-card>
          <template>
            <el-table :data="tableData" border style="width: 100%">

              <el-table-column fixed prop="serial-number" label="序号" width="150" />

              <el-table-column prop="task-number" label="运输任务编号" width="120" />

              <el-table-column prop="license-plate-number" label="车牌号码" width="120" />

              <el-table-column prop="origin" label="起始地" width="120" />

              <el-table-column prop="destination" label="目的地" width="300" />

              <el-table-column prop="task-status" label="运输任务状态" width="120" />
              <el-table-column prop="car-loading" label="车俩装载状态" width="120" />
              <el-table-column prop="assignment" label="任务分配状态" width="120" />
              <el-table-column prop="plan" label="计划发车时间" width="120" />
              <el-table-column prop="actual" label="实际发车时间" width="120" />
              <el-table-column prop="update-rule" label="更新规则" width="120" />

              <el-table-column fixed="right" label="操作" width="100">

                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],

      labelPosition: 'right',
      formInline: {
        user: '',
        region: ''
      }

    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container {
    padding: 20px;
    background-color: #f3f4f7;
    padding-top: 0px;

    .tab-change{
      padding: 0 !important;
      background-color: #fff;

      .el-button{
        width: 120px;
        height: 50px;
        border: none;
        border-radius: 0;
        margin: 0; }

    }
.el-row{
  margin-bottom: 10px;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .el-col {
    border-radius: 4px;
  .search{
    margin-left: 50px;
  }
  }
}
</style>
